<template>
    <div @click="uploadClick" class="upload content-center">
        <i class="el-icon-upload2"></i>
        <input type="file" accept="image/*" name="file" id="fileupload" @change="upload" style="display: none"/>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    methods: {
        uploadClick(){
            document.getElementById('fileupload').click();
        },
        upload(res){
            var reads = new FileReader()
            reads.onload = (e) => {
                this.$emit('change',e.target.result)
            };
            reads.readAsDataURL(res.target.files[0])
        },
    },
}
</script>

<style lang="scss" scoped>
.upload{width: 60px;height: 60px;border-radius: 4px;overflow: hidden;border: 1px solid #eee;cursor: pointer;background: #f7f8fa;
    &:hover{border: 1px solid #409EFF;color: #409EFF;}
    &:hover .el-icon-upload2{color: #409EFF;}
    .el-icon-upload2{color: #bfbfbf;font-size: 22px;}
}
</style>

